<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href=""> -->

    <title>Circles</title>

    <!-- Bootstrap core CSS -->
    <link href="/resources/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/resources/js/html5shiv.js"></script>
      <script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Alef' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    	body { 
			padding-top: 70px;
			padding-bottom: 70px;
			background-color: #f6f7f7;
		}
		.commonFont{
    		font-family: 'Nanum Gothic', sans-serif;
    	}
    	#searchResultDisplay div{
    		padding:15px;
    		margin:0;
    		width:100%;
    		border-top:1px solid #EEEEEE;
    		text-align: left;
    	}
    	#searchResultDisplay div:hover,
    	#searchResultDisplay div:focus{
    		background-color:#F6F6F6;
    	}
    	.alert{
    		width:600px;
    		position: fixed;
    		z-index: 1050;
    		left: 50%;
    		margin-left:-300px;
    		top:15px;
    		display:none;
    	}
    </style>
	<script src="/resources/js/jquery-1.11.0.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="/resources/js/bootstrap.js"></script>
    <script type="text/javascript">
    	var searchCheck = false;
    	
	    $(document).ready(function(){
			// 경고창 닫기버튼
			$("button.close").click(function(){
				$(this).parent().hide();
			});

			$("#groupSearchForm").on('keypress', function(e){
				if(e.which == 13){
					/* 최초 엔터시 초기화 필요 */
					$("#searchResultDisplay").html("");
					$("#index").val(0);
					
		    		var inputValueCheck = true;
		    		$(this).find("input[type=text]").each(function(){
		    			if($.trim($(this).val()) != ""){
		    				inputValueCheck = false;
		    				searchCheck = true; //스크롤이벤트 활성화
		    			}
		    		});
		    		if(inputValueCheck){
		    			$("#failAlert > a > span").html("검색어를 입력해 주세요");
		    			$("#failAlert").fadeIn(400).delay(2000).fadeOut(400);
		    		}else{
		    			searchAjax();
		    		}
		    		
				}
	    	});
			
			// 프로필보기 팝오버
			//var selector = $("span.profileViewer");
			/* $('[data-toggle="profile"]').popover({
				content:function (){
					//alert('dd');
					return "<div>test</div>";
				},
				html:true,
				trigger:'hover',
				placement:'top',
				container: 'body'
			}); */
			
			
		});
	    
    	$(window).scroll(function(){
    		if($(window).scrollTop() == $(document).height() - $(window).height()){
    			if(searchCheck){
	    			$("#index").val(parseInt($("#index").val())+8);
	    			searchAjax();
	    			console.log($("#index").val());
    			}
    		}
    	});
    	
    	function searchAjax(){
    		var searchResultDisplay = $("#searchResultDisplay");
    		var data = $("#groupSearchForm").serialize();
    		
    		$.ajax({
 			    type : "POST"
 			    , url : "/searchGroupPr"
 			    , dataType : "json"
 			    , data : data
 			    , timeout : 5000
 			    , error : function() {
 			    	
 			    }
 			    , success : function(response) {
 			    	if(response == "" && $("#index").val() == 0){
 			    		searchResultDisplay.html("<p>일치하는 그룹이 없습니다</p>");	
 			    	}else{
 			    		if(response != ""){
	 			    		for(var i=0;i<response.length;i++){
	 			    			var html = "<div>";
	 			    			html += "<p class='h4 text-primary'>";
	 			    			html += "<a href='/"+response[i].url+"'>"+response[i].name+"</a>";
	 			    			html += "<small>&nbsp;&nbsp;"+response[i].memberCount+"명 멤버 / ";
	 			    			html += "<span data-toggle='profile' data-num='"+response[i].userNum+"' style='cursor:pointer;'>"+response[i].manager+"</span></small>";
	 			    			html += "</p><p class='text-muted'>"+response[i].content+"</p></div>";
	 			    			searchResultDisplay.append(html);
	 			    		}
 			    		}else{ // 모든값을 불러오면 스크롤이벤트 작동안함
 			    			searchCheck = false;
 			    			searchResultDisplay.append("<div><i class='glyphicon glyphicon-minus-sign'></i>&nbsp;<strong>더이상 존재하지 않습니다</strong></div>");
 			    		}
 			    	}
 			    	$('[data-toggle="profile"]').popover({
 						content:function (){
 							var div_id =  "div-id-" + $.now();
 							return profileViewer($(this).data('num'), div_id);
 						},
 						html:true,
 						trigger:'manual',
 						title: "<center><a href='#'><i class='fa fa-envelope'></i></a></center>",
 						placement:'top',
 						container: 'body'
 			    	}).on("mouseenter", function () {
 			           var _this = this;
 			          $(this).popover("show");
 			          $(".popover").on("mouseleave", function () {
 			              $(_this).popover('hide');
 			          });
 			      	}).on("mouseleave", function () {
 			          var _this = this;
 			          setTimeout(function () {
 			              if (!$(".popover:hover").length) {
 			                  $(_this).popover("hide");
 			              }
 			          }, 100);
 			     	});
 			    }
 			    , beforeSend: function() {
 			    	//searchResultDisplay.hide();
 			    	$('#loadingGroupSearch').show();
 			    }
 			    , complete: function() {
 			    	$('#loadingGroupSearch').hide();
 			    	//searchResultDisplay.show();
 			    }
 			});
    		
    		function profileViewer(userNum, div_id){
	    		$.ajax({
	 			    type : "POST"
	 			    , url : "/userProfileView?userNum="+userNum
	 			    , dataType : "json"
	 			    , timeout : 3000
	 			    , error : function() {
	 			    	$('#'+div_id).html("프로필 정보를 불러올 수 없습니다");
	 			    }
	 			    , success : function(response) {
	 			    	$('#'+div_id).html("<img src='/profileImageViewer/"+userNum+"' width='200px;' height='160px;'><br><h4>"+response.name+"</h4>");
	 			    }
	 			    , beforeSend: function() {
	 			    	
	 			    }
	 			    , complete: function() {
	 			    	
	 			    }
	 			});
	    		return "<div id='"+div_id+"' style='min-width:200px; min-height:200px; text-align:center; margin:0; overflow:hidden;'><img src='/resources/img/ajax-loader2.gif'></div>";
	    	}
    	}
	    
    </script>
  </head>

  <body>
  <!-- Fixed navbar -->
		<jsp:include page = "head.jsp" flush="false"/>
  <!-- Fixed navbar -->
    
    <div class="container">
    	<div class="col-md-8" style="padding:0;">
    		<div class="well well-sm" style="background-color:white;">
    			<h5><strong>초대받은 그룹 </strong><span class="badge">0</span></h5>
    			<hr style="margin-top:8px;">
    		</div>
    		
    		<div class="well well-sm hidden-xs hidden-sm" style="background-color:white;">
    			<h5><strong>알 수도 있는 그룹 </strong></h5>
    			<hr style="margin-top:8px;">
    			<div id="searchResultDisplay" style="text-align:center; margin:0;"></div>
				<div id="loadingGroupSearch" style="text-align:center; display: none; padding:15px;"><img src="/resources/img/ajax-loader.gif" /></div>
    		</div>
    		
    	</div>
    	<div class="col-md-3 col-md-offset-1" style="padding:0;">
	    	<div class="well well-sm" style="background-color:white; padding:15px 15px 25px 15px;">
	   			<h5><i class="glyphicon glyphicon-search"></i><strong> 그룹 검색</strong></h5>
	   			<hr style="margin-top:8px;">
	   			<form role="search" id="groupSearchForm" method="post">
	   				<input type="hidden" name="index" id="index" value=0>
	   				<div class="form-group">
	   					<label for="InputGroupName">그룹명</label>
	   					<input type="text" class="form-control" id="InputGroupName" name="InputGroupName" placeholder="그룹명을 입력하세요" title="그룹명을 입력하세요">
	   				</div>
	   				<div class="form-group">
	   					<label for="InputHighSchool">고등학교 <abbr title="입력된 고등학교와 연관된 그룹을 찾습니다."><i class="glyphicon glyphicon-question-sign" style="color:#808080;"></i></abbr></label>
	   					<input type="text" class="form-control" id="InputHighSchool" name="InputHighSchool" placeholder="고등학교 이름을 입력하세요" title="고등학교 이름을 입력하세요">
	   				</div>
	   				<div class="form-group">
	   					<label for="InputCollege">대학교 <abbr title="입력된 대학교와 연관된 그룹을 찾습니다."><i class="glyphicon glyphicon-question-sign" style="color:#808080;"></i></abbr></label>
	   					<input type="text" class="form-control" id="InputCollege" name="InputCollege" placeholder="대학교 이름을 입력하세요" title="대학교 이름을 입력하세요">
	   				</div>
	   				<div class="form-group">
	   					<label for="InputWorkplace">직장 <abbr title="입력된 직장과 연관된 그룹을 찾습니다."><i class="glyphicon glyphicon-question-sign" style="color:#808080;"></i></abbr></label>
	   					<input type="text" class="form-control" id="InputWorkplace" name="InputWorkplace" placeholder="직장명을 입력하세요" title="직장명을 입력하세요">
	   				</div>
	   				<div class="form-group">
	   					<label for="InputResidence">거주지 <abbr title="입력된 거주지와 연관된 그룹을 찾습니다."><i class="glyphicon glyphicon-question-sign" style="color:#808080;"></i></abbr></label>
	   					<input type="text" class="form-control" id="InputResidence" name="InputResidence" placeholder="거주지를 입력하세요" title="거주지를 입력하세요">
	   				</div>
	   			</form>
	   			<p>찾는 그룹이 없나요? 먼저 그룹을 생성해 보세요</p>
	   			<button type="button" class="btn btn-success btn-lg btn-block" onclick="location.href='/createGroup'"><i class="fa fa-group"></i>&nbsp;그룹만들기</button>
	   		</div>
	   	</div>
    </div><!-- end container -->
    
    <div class="container ">
    	<div class="well well-sm hidden-md hidden-lg" style="background-color:white;">
   			<h5><strong>알 수도 있는 그룹 </strong></h5>
   			<hr style="margin-top:8px;">
    	</div>
    </div>
    <!-- footer -->
	<div class="hidden-xs">
		<jsp:include page = "footer.jsp" flush="false"/>
	</div>
	<!-- footer -->

    <!-- 경보창 -->
	<div class="alert alert-success" id="successAlert">
		<button type="button" class="close">×</button>
		<a href="#" class="alert-link commonFont"></a>
	</div>

	<div class="alert alert-danger" id="failAlert">
		<button type="button" class="close">×</button>
		<a href="#" class="alert-link commonFont"><i class='glyphicon glyphicon-exclamation-sign' style='color:#BF0000;'></i>&nbsp;<span></span></a>
	</div>
    <!-- 경보창 -->
    
    
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->  
  </body>
</html>